<template>
	<view>
		<u-popup v-model="show" mode="bottom" border-radius="30" length="85%" @close="show = false">
			<!-- 顶部 -->
			<view class="tab-container">
				<div class="tab-item" :class="{ 'active': currentPage === 'expense' }" @click="switchPage('expense')">支出
				</div>
				<div class="tab-item" :class="{ 'active': currentPage === 'income' }" @click="switchPage('income')">收入
				</div>
			</view>
			<view v-if="currentPage === 'expense'|| currentPage === 'income'">
				<!-- 支出页面的内容 -->
				<view class="button-container">
					<!-- 动态生成按钮 -->
					<div class="button-wrapper" v-for="(category, index) in currentPageCategories" :key="index">
						<button class="circle-button">
							<!-- 按钮内容留空，仅显示背景色,之后填充图标 -->
						</button>
						<span class="button-label">{{ category }}</span>
					</div>
				</view>

			</view>
			
		</u-popup>
		<u-button @click="show = true">打开popup层</u-button>
	</view>
</template>

<script>
	export default {
		name: "U-Popup",
		data() {
			return {
				show: false,
				currentPage: 'expense', // 默认页面为支出
				// 定义两个页面的内容数组
				expenseCategories: [
					"餐饮", "购物", "日用", "交通",
					"果蔬", "零食", "运动", "快递",
					"娱乐", "通讯", "服饰", "美容",
					"住房", "居家", "孩子", "长辈",
					"社交", "旅行", "烟酒", "数码",
					"汽车", "医疗", "书籍", "学习",
					"宠物", "礼金", "礼物", "办公",
					"维修", "捐赠", "彩票", "亲友"
				],

				incomeCategories: [
					"工资", "兼职", "理财", "礼金", "其它"
				]
			};
		},
		computed: {
			currentPageCategories() {
				return this.currentPage === 'income' ?
					this.incomeCategories :
					this.expenseCategories;
			}
		},
		methods: {
			switchPage(page) {
				this.currentPage = page;
			}
		}
	}
</script>

<style>
	.tab-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		/* 根据需要调整内边距 */
	}

	.tab-item {
		cursor: pointer;
		position: relative;
		padding: 5px 10px;
		margin: 0 15px;
		color: #333;
		transition: color 0.3s;
		font-family: "Microsoft Yahei";
		font-weight: 600;
		font-size: 20px;
	}

	.tab-item::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		/* 阴影高度 */
		background-color: #007bff;
		/* 蓝色阴影 */
		transform: scaleX(0);
		/* 初始状态阴影不可见 */
		transition: transform 0.3s;
		/* 平滑过渡阴影变化 */
	}

	.tab-item.active::after {
		transform: scaleX(1);
		/* 激活状态阴影可见 */
	}

	.tab-item:hover {
		color: #007bff;
	}

	/* 按钮内容 */
	.button-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 5px 3px;
		/* 根据需要调整间距 */
		padding: 10px;
	}

	.button-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中对齐 */
		cursor: pointer;
	}

	.circle-button {
		width: 50px;
		/* 按钮宽度 */
		height: 50px;
		/* 按钮高度，圆形 */
		border-radius: 50%;
		border: none;
		background-color: #ddd;
		/* 灰色背景 */
		color: transparent;
		/* 隐藏按钮上的文本 */
		overflow: hidden;
		/* 确保圆形裁剪完整 */
		margin-bottom: 6px;
		/* 按钮与文本的间距 */
		margin-top: 10px;
	}

	.button-label {
		font-size: 14px;
		/* 根据需要调整文本大小 */
		font-family: "Microsoft Yahei";
		font-weight: bolder;
		text-align: center;
		width: 100%;
		/* 文本宽度 */
	}
</style>